vue2知识点：箭头函数和普通函数的this指向问题 |
您所在的位置：网站首页 › vue2 教程 › vue2知识点：箭头函数和普通函数的this指向问题 |
vue2知识点：箭头函数和普通函数的this指向问题
文章目录
摘要
主要区别
详细说明
举例
总结
摘要
记录此文章是因为本人是vue初学者，刚看完尚硅谷的教学视频，到现在为止对箭头函数和普通函数的this指向问题直接弄混了，所以特意查阅相关博客并记录下自己的总结。 主要区别 普通函数：（谁调用我，我的this就指向谁） 箭头函数：（箭头函数没有自己的this, 它的this是继承而来， 它会捕获其所在（即定义的位置）上下文的this值， 作为自己的this值；或者说默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象。） 详细说明注意点1： 不被vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数=》JS引擎帮忙调用）那么请使用箭头函数，因为箭头函数中this指代vm或者vc。 注意点2： 所有被Vue管理的函数（Vue帮忙调用），最好写成普通函数（普通函数中的this代表它的直接调用者，如obj.fn()，fn的this指向就是obj。默认情况下，没有直接的调用者,this的指向为window），这样this的指向才是vm 或 组件实例对象。 举例普通函数情况 在全局函数中，普通函数中this =》window 当普通函数被作为某个对象的方法调用时，this就等于那个对象计算属性computed和监视属性watch情况 计算属性使用同步操作的普通函数，this => vue， 计算属性使用同步操作的箭头函数，this => window 监视属性使用同步操作的普通函数，this => vue， 监视属性使用同步操作的箭头函数，this => window， 监视属性使用异步操作的普通函数，this => window， 监视属性使用异步操作的箭头函数，this => vue父子组件通信使用$refs.组件名称.$on(‘自定义事件名’， 配置项)情况 在父组件App中使用$on的普通函数this指代子组件的vc，而$on的箭头函数this指代父组件的vc，所以$on的普通函数的this.studentName = name就会赋值失败，正确写法就是上面说的，要么method定义赋值，$on中直接调用，要么$on中使用箭头函数去赋值 mounted() { this.$refs.student.$on('atguigu',function (name,...params) { console.log('App收到了学生名：',name,params) console.log("this:", this); //使用自定义组件的配置项的普通函数中this指代子组件Student.vue的vc this.studentName = name }) //绑定自定义事件 } --------------------------------------------------------------------------------------- mounted() { this.$refs.student.$on('atguigu',(name,...params) => { console.log('App收到了学生名：',name,params) console.log("this:", this); //使用自定义组件的配置项的箭头函数中this指代父组件App.vue的vc this.studentName = name }) //绑定自定义事件 }生命周期钩子函数中（如beforeCreate，created，beforeMount，mounted，beforeUpdate， updated，beforeDestroy以及destroyed） this指代vue对象 总结哪怕总结了这么多种情况，但是你要是问我，什么情况使用普通函数，什么情况使用箭头函数，我的回答是： 不被vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数=》JS引擎帮忙调用）那么请使用箭头函数。 计算属性computed和监视属性watch直接用普通函数 除上述2种情况外，所有方法都在methods中定义好，不要在$on的配置项中去定义函数；另外如果你怕this指向混乱，你直接在外部定义个变量去存储当前vue组件的vm或者vc。举例说明就是，你要使用$on去触发自定义事件，你先定义一个变量存储当前组件的vm和vc，然后你在$on的配置项的函数中直接用定义好的那个this变量去设置值，不要在配置项中的函数中用this，因为你不知道局部方法中这个this指向谁。 |
【本文地址】